import React from 'react';
import PropTypes from 'prop-types';
import { Form, Input, InputNumber, Modal} from 'antd'
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        span: 5
    },
    wrapperCol: {
        span: 18
    },
};
// const dialogProps = {
//     item: modalType === 'create' ? {} : currentItem,
//     visible: modalVisible,
//     maskClosable: false,
//     confirmLoading: loading.effects['user/update'],
//     title: `${modalType === 'create' ? 'Create A New User' : 'Update The User Information'}`,
//     onCreate (values) {
//         if(modalType === 'create'){
//             dispatch({
//                 type: 'user/create',
//                 payload: values,
//             })
//         } else {
//             dispatch({
//                 type: 'user/update',
//                 payload: values,
//             })
//         }
//     },
//     onCancel () {
//         dispatch({
//             type: 'user/hideModal',
//         })
//     },
// };
const Dialog = ({ item = {}, onCreate, form, ...modalProps}) => {
    const { getFieldDecorator, validateFields, getFieldsValue } = form;
    const handleOk = () => {
        validateFields((errors) => {
            if (errors) {
                return
            }
            const data = getFieldsValue();
            onCreate(data)
        })
    };

    const modalOpts = {
        ...modalProps,
        onOk: handleOk
    };

    return (
        <Modal {...modalOpts}>
            <Form layout="horizontal">
                <FormItem label="Name" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('name', {
                        initialValue: item.name,
                        rules: [
                            {
                                required: true,
                            },
                        ],
                    })(<Input />)}
                </FormItem>
                <FormItem label="NickName" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('nickName', {
                        initialValue: item.nickName,
                        rules: [
                            {
                                required: true,
                            },
                        ],
                    })(<Input />)}
                </FormItem>
                <FormItem label="Age" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('age', {
                        initialValue: item.age,
                        rules: [
                            {
                                required: true,
                                type: 'number',
                            },
                        ],
                    })(<InputNumber min={18} max={99} style={{width: 355}}/>)}
                </FormItem>
                <FormItem label="E-mail" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('email', {
                        initialValue: item.email,
                        rules: [
                            {
                                required: true,
                                pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
                                message: 'The input is not valid E-mail!',
                            },
                        ],
                    })(<Input />)}
                </FormItem>
                <FormItem label="Phone" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('phone', {
                        initialValue: item.phone,
                        rules: [
                            {
                                required: true,
                                pattern: /^1[34578]\d{9}$/,
                                message: 'The input is not valid phone!',
                            },
                        ],
                    })(<Input />)}
                </FormItem>
                <FormItem label="Address" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('address', {
                        initialValue: item.address,
                        rules: [
                            {
                                required: true,
                            },
                        ],
                    })(<Input />)}
                </FormItem>
            </Form>
        </Modal>
    )
};

Dialog.propTypes = {
    form: PropTypes.object.isRequired,
    type: PropTypes.string,
    item: PropTypes.object,
    onOk: PropTypes.func,
};

export default Form.create()(Dialog);